TESTING, NG0304 is not a known element

Descripcion

Al ejecutar los tests vemos errores como el siguiente en la consola del navegador:

NG0304: 'app-list-element' is not a known element
Solucion

Declarar el componente

El error se produce porque en el tests no están definidos esos componentes

En realidad no tenemos que definirlos a no ser que los necesitemos para testear algo relacionado con el componente faltante, en ese caso lo declarariamos asi en el test:

Al ejecutar el test ya veríamos la ejecución sin errores:

Mockear el componente

Otra solución es mockear el componente, para simular un comportamiento concreto que necesitemos para el test:

Al mockear el componente vacio en este caso obtenemos lo siguientes errores por consola:

Como podemos ver el error NG0304 ha desaparecido, pero los errores NG0303 persisten, ya que el componente que hemos declarado no contiene las propiedades que si que contiene el componente original.

Si queremos podemos definirlas:

El codigo del componente definitivo quedaría tal que así:

import { Component, Input } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ListBlockComponent } from 'src/app/shared-components/list-block/list-block.component';

describe('ListBlockComponent', () => {
  let component: ListBlockComponent;
  let fixture: ComponentFixture<ListBlockComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ ListBlockComponent, MockListComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ListBlockComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

@Component({
  selector: 'app-list-element',
  template: ''
})
class MockListComponent {
  @Input() map: any;
  @Input() sliceLimit: any;
  @Input() elementName: any;
}

Configurar el test para que no se muestren los errores

Otra solución que podemos adoptar es la de configurar los tests para que los errores sean obviados:

schemas: [NO_ERRORS_SCHEMA]
Tags

Angular | NG0304 | expect | Error